<template>
    <div class="search-box">
        <el-cascader placeholder="请选择" :options="addressBook" @change="handleChange" />
        <button @click="fetchWeather" :disabled="!selectedCity">
            {{ loading ? '查询中...' : '查询' }}
        </button>
    </div>
    <div id="container"></div>
    <div id="panel"></div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';
import AMapLoader from "@amap/amap-jsapi-loader";
const selectedCity = ref('')
let map = null;
let infoWindow = null;
let driving = null;
let lakes = require("../../public/lakes.json")
console.log(lakes)
onMounted(() => {
    window._AMapSecurityConfig = {
        securityJsCode: "f2c6cb031e7c35eca926eab8ec57a958",
    };
    AMapLoader.load({
        key: "b704bd3f11f84a00314fd1e71babc37b",
        version: "2.0",
        plugins: ['AMap.Scale', 'AMap.InfoWindow', 'AMap.Marker', 'AMap.Polygon', 'AMap.Driving']
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                resizeEnable: true,
                viewMode: "3D",
                zoom: 12,
                // center: [114.3054, 30.5928], // 武汉中心坐标
                center: [114.2648, 30.6543], // 武汉中心坐标
            });
            initInfoWindow(AMap);
            addLakes(AMap);
            addMapControls(AMap);
            //构造路线导航类
            driving = new AMap.Driving({
                map: AMap,
                panel: "panel"
            });
            // 根据起终点经纬度规划驾车导航路线
            driving.search(new AMap.LngLat(114.2648, 30.6543), new AMap.LngLat(114.2476, 30.6428), function (status, result) {
                // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                if (status === 'complete') {
                    console.log('绘制驾车路线完成', result)
                } else {
                    console.log('获取驾车数据失败：' + result)
                }
            });
        })
        .catch((e) => {
            console.log(e);
        });
});

const initInfoWindow = (AMap) => {
    infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, -30),
        // autoMove: true,
        // closeWhenClickMap: true
    });
};

const addLakes = (AMap) => {
    lakes.forEach((lake) => {
        // 添加湖泊名称标注
        const mark = new AMap.Marker({
            icon: "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: lake.path[0],
            offset: new AMap.Pixel(0, 0)
        })
        mark.on('click', (e) => showLakeInfo(lake, e.lnglat));
        mark.setMap(map);
    });
};

const showLakeInfo = (lake, position) => {
    const content = `
            <div class="info-window">
              <p>名称：${lake.name}</p>
              <p>位置 ${lake.location}</p>
              <p>面积：${lake.area}</p>
              <p>历史：${lake.content}</p>
              <p>鱼群：${lake.fish.join(",")}</p>
            </div>
          `;
    infoWindow.setContent(content);
    infoWindow.open(map, position);
};

// 添加地图控件
const addMapControls = (AMap) => {
    map.addControl(new AMap.Scale());
    map.addControl(new AMap.ToolBar());
    map.addControl(new AMap.HawkEye());
};
onBeforeUnmount(() => {
    if (map) {
        map.destroy();
    }
});
</script>

<style scoped>
.search-box {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 20px;
}

#container {
    width: 100%;
    height: 800px;
}

.lake-label {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
}

.info-window {
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
</style>